<template>
    <div class="star-level">
        <template v-for="index in maxLevel">
            <!--可操作-->
            <span v-if="! isControl"
                  class="star"
                  :class="{none: index > currLevel}"></span>
            <!--不可操作-->

            <span v-else
                  class="star c-pointer"
                  :class="{none: index > currLevel}"
                  @mouseenter="enter(index)"
                  @mouseleave="leave"
                  @click="select(index)"></span>
        </template>
    </div>
</template>

<script>
    export default {
        name: 'starLevel',
        props: {
            maxLevel: {type: Number, default: 5},
            initLevel: {type: Number, default: 1},
            isControl: {type: Boolean, default: false},
        },
        created(){
            this.currLevel = this.initLevel;
        },
        data(){
            return {
                currLevel: 1,
                enterBeforeLevel: null,
            };
        },
        methods: {
            enter(index){
                this.enterBeforeLevel = this.currLevel;
                this.currLevel = index;
            },
            leave(){
                this.currLevel = this.enterBeforeLevel;
            },
            select(index){
                this.enterBeforeLevel = index;
                this.currLevel = index;
            }
        },
    }
</script>

<style lang="scss">
    .star-level{
        display: inline-block;
        .star{display: inline-block;width: 20px;height: 20px;background: url(/static/images/icon_03.png) no-repeat;padding-right: 8px;}
        .star.none{background-position: -28px 0;}
    }
</style>
